<template>
    <div class="step">
        <ul>
            <li v-for="(item,index) in steps" :key="item.step" :class="`${active == index+1 ? 'active':''}`">
                <el-button :type="`${active > index ? finishStatus :'info'}`" round>{{ item.title }}</el-button>
                <div class="arrow" v-if="index < steps.length - 1">
                    <i class="iconfont">&#xe610;</i>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'step',
        props: {
            // 当前步骤
            active: {
                type: [String, Number],
                default: 1
            },
            // 完成后的颜色
            finishStatus: {
                type: String,
                default: 'success'
            },
            steps: {
                type: Array,
                default() {
                    return [
                        {
                            step: 1,
                            title: '目标标准'
                        },
                        {
                            step: 2,
                            title: '过程监控'
                        },
                        {
                            step: 3,
                            title: '诊断分析'
                        },
                        {
                            step: 4,
                            title: '导出报告'
                        }
                    ]
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.step{
    ul, li{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    li{
        position: relative;
        .el-button{
            min-width: 90px;
        }
        .arrow{
            margin-left: 20px;
            margin-right: 20px;
            color: $yellow;
            .iconfont{
                font-size: 30px;
            }
        }
    }
    li.active{
        &:after{
            content: '';
            position: absolute;
            bottom: -13px;
            left: 10px;
            width: 0;
            height: 0;
            border-top: 10px solid #73C74A;
            border-left: 35px solid transparent;
            border-right: 35px solid transparent;
        }
    }
}
</style>